require('../../less/controls/checkbox-radio.less');
require('../../less/controls/layout.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'RadioGroup',
	getInitialState:function(){
		return {
			disabled: this.props.disabled
		}
	},
	componentDidMount:function(){

	},
	__onItemChange: function (event, item, index){
		if(this.state.disabled){
			return;
		}
		this.props.onChange && this.props.onChange(event, {
			index: index,
			value: item
		}, this);
	},
	disabled: function (value) {
		this.setState({
			disabled: value
		});
	},
	render: function(){
		var _disabled = this.state.disabled||false,
			_value = this.props.value||'',
			_time = (new Date()).getTime();
		return (
			<div className={"c-radio-group " + (this.props.className||'') + ' layout-' + (this.props.layout||'inline')} style={this.props.style}>
				{
					this.props.data && this.props.data.map(function (item, index) {
						var _item = (typeof item=='string')?{ text: item }:item,
							_itemValue = _item.value || _item.text;
						if(_value===_itemValue){
							_item.checked = true;
						} else {
							_item.checked = false;
						}
						return <label className="c-radio" key={index}>
							<input 	type="radio"
									name={(this.props.name||"radio_" + _time)}
									value={_item.value}
									defaultChecked={_item.checked===true?true:undefined}
									disabled={_disabled===true?true:undefined}
									onChange={(event)=>this.__onItemChange(event, _item, index)}/>
							{
								_item.text && <span className="label">{_item.text}</span>
							}
						</label>;
					}.bind(this))
				}
			</div>
		);
	}
});
